<template>
  <view class="container">
    <!-- 账号安全 -->
    <view class="section">
      <view class="section-title">账号安全</view>
      <view class="menu-list">
        <view class="menu-item" @tap="goToPage('/pages/settings/password')">
          <text>修改密码</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
        <view class="menu-item" @tap="goToPage('/pages/settings/phone')">
          <text>更换手机号</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
        <view class="menu-item" @tap="goToPage('/pages/settings/payment-password')">
          <text>支付密码</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>
    
    <!-- 消息通知 -->
    <view class="section">
      <view class="section-title">消息通知</view>
      <view class="menu-list">
        <view class="menu-item">
          <text>订单消息</text>
          <switch :checked="settings.orderNotify" @change="handleSwitch('orderNotify', $event)" />
        </view>
        <view class="menu-item">
          <text>活动消息</text>
          <switch :checked="settings.activityNotify" @change="handleSwitch('activityNotify', $event)" />
        </view>
        <view class="menu-item">
          <text>系统消息</text>
          <switch :checked="settings.systemNotify" @change="handleSwitch('systemNotify', $event)" />
        </view>
      </view>
    </view>
    
    <!-- 隐私设置 -->
    <view class="section">
      <view class="section-title">隐私设置</view>
      <view class="menu-list">
        <view class="menu-item">
          <text>浏览历史</text>
          <switch :checked="settings.historyVisible" @change="handleSwitch('historyVisible', $event)" />
        </view>
        <view class="menu-item">
          <text>收藏列表</text>
          <switch :checked="settings.favoriteVisible" @change="handleSwitch('favoriteVisible', $event)" />
        </view>
        <view class="menu-item">
          <text>订单记录</text>
          <switch :checked="settings.orderVisible" @change="handleSwitch('orderVisible', $event)" />
        </view>
      </view>
    </view>
    
    <!-- 其他设置 -->
    <view class="section">
      <view class="section-title">其他设置</view>
      <view class="menu-list">
        <view class="menu-item" @tap="clearCache">
          <text>清除缓存</text>
          <text class="cache-size">{{cacheSize}}</text>
        </view>
        <view class="menu-item" @tap="goToPage('/pages/settings/about')">
          <text>关于我们</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
        <view class="menu-item" @tap="goToPage('/pages/settings/feedback')">
          <text>意见反馈</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <view class="logout-btn" @tap="handleLogout">
      <text>退出登录</text>
    </view>
  </view>
</template>

<script>
import { userApi } from '@/api/index'
import { showToast, showModal } from '@/utils/common'

export default {
  data() {
    return {
      settings: {
        orderNotify: true,
        activityNotify: true,
        systemNotify: true,
        historyVisible: true,
        favoriteVisible: true,
        orderVisible: true
      },
      cacheSize: '0MB'
    }
  },
  onLoad() {
    this.getSettings()
    this.getCacheSize()
  },
  methods: {
    // 获取设置
    async getSettings() {
      try {
        const res = await userApi.getSettings()
        this.settings = res
      } catch (error) {
        showToast('设置加载失败')
      }
    },
    
    // 获取缓存大小
    async getCacheSize() {
      try {
        const res = await userApi.getCacheSize()
        this.cacheSize = res
      } catch (error) {
        showToast('缓存大小获取失败')
      }
    },
    
    // 处理开关切换
    async handleSwitch(key, event) {
      try {
        await userApi.updateSetting(key, event.detail.value)
        this.settings[key] = event.detail.value
        showToast('设置更新成功')
      } catch (error) {
        showToast('设置更新失败')
      }
    },
    
    // 清除缓存
    async clearCache() {
      try {
        await showModal('提示', '确定要清除缓存吗？')
        await userApi.clearCache()
        this.cacheSize = '0MB'
        showToast('清除成功')
      } catch (error) {
        if (error) {
          showToast('清除失败')
        }
      }
    },
    
    // 页面跳转
    goToPage(url) {
      uni.navigateTo({ url })
    },
    
    // 退出登录
    async handleLogout() {
      try {
        await showModal('提示', '确定要退出登录吗？')
        await userApi.logout()
        uni.reLaunch({
          url: '/pages/login/index'
        })
      } catch (error) {
        if (error) {
          showToast('退出失败')
        }
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 40rpx;
}

.section {
  margin-top: 20rpx;
  background: #fff;
  
  .section-title {
    padding: 20rpx 30rpx;
    font-size: 28rpx;
    color: #999;
  }
  
  .menu-list {
    .menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 1rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      text {
        font-size: 28rpx;
        color: #333;
      }
      
      .icon-arrow-right {
        font-size: 24rpx;
        color: #999;
      }
      
      .cache-size {
        font-size: 24rpx;
        color: #999;
      }
      
      switch {
        transform: scale(0.8);
      }
    }
  }
}

.logout-btn {
  margin: 40rpx 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: #ff0000;
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
}
</style> 